<template>
  <div>
     <h4>求和为：{{sum}}</h4>
     <div>
         <input type="text" placeholder="请输入" v-model="name">
         <button @click="add">添加</button>
         <ul>
             <li v-for="(ietm,index) in peronList" :key="index">{{ietm.name}}</li>
         </ul>
     </div>
  </div>
</template>

<script>
// 方法二：
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
  data () {
    return {
      name: ''
    }
  },
  computed: {
  // 二
    ...mapState(['peronList', 'sum'])
  //   一
  //     peronList () {
  //       return this.$store.state.peronList
  //     }
  },
  methods: {
    add () {
      const peronObj = { id: nanoid(), name: this.name }
      this.$store.commit('ADDPERSON', peronObj)
      this.name = ''
    }
  }
}
</script>

<style>

</style>
